<template>
    <div>
<h2>酒店添加</h2>
<h2>fghfghgh</h2>
<table class="table table-bordered">
    <tbody>
        <tr>
            <td>酒店名称</td>
            <td><input type="text" v-model="data.hotelName"></td>
        </tr>
        <tr>
            <td>联系电话</td>
            <td><input type="text" v-model="data.phone"></td>
        </tr>
        <tr>
            <td>地区</td>
            <td>
                <select v-model="data.hotelCityId">
                    <option value="">请选择</option>
                    <option :value="item.hotelCityId" v-for="item in list">{{item.hotelCityName}}</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>酒店图片</td>
            <td><input type="file" @change="Photo">
            <img :src="data.hotelImg" width="100" height="100" v-if="data.hotelImg!=''">
            </td>
        </tr>
        <tr>
            <td>详细地址</td>
            <td><input type="text" v-model="data.addressDic"></td>
        </tr>
        <tr>
            <td>状态</td>
            <td><input type="radio" name="state" v-model="data.state" :value="1">开业
            <input type="radio" name="state" v-model="data.state" :value="0">停业</td>
        </tr>
        <tr>
            <td>开业时间</td>
            <td><input type="date" v-model="data.createTime"></td>
        </tr>
        <tr>
            <td>酒店介绍</td>
            <td>
                <textarea rows="4" cols="40" v-model="data.hotelDesc"></textarea>
            </td>
        </tr>
        <tr>
            <td>交通指引</td>
            <td> <textarea rows="4" cols="40" v-model="data.transport"></textarea></td>
        </tr>
        <tr>
            <td>酒店政策</td>
            <td> <textarea rows="4" cols="40" v-model="data.policy"></textarea></td>
        </tr>
        <tr>
            <td></td>
            <td><input type="button" value="添加" class="btn btn-primary" @click="ok"></td>
        </tr>
    </tbody>
</table>
    </div>
</template>

<script setup lang="ts">
import {ref,reactive,onMounted} from 'vue';
import axios from 'axios';
import moment from 'moment';
import { useRoute,useRouter } from 'vue-router';
const router = useRouter();
const route = useRoute();

let list:any = ref([]);
let data:any =reactive({
  "hotelName": "",
  "phone": "",
  "hotelCityId": '',
  "hotelImg": "",
  "addressDic": "",
  "state": 1,
  "createTime": "",
  "hotelDesc": "",
  "transport": "",
  "policy": ""
})
onMounted(()=>{
    getCity();
})

const getCity = ()=>{
axios({
    url:'/api/Hotel/GetHotelCity',
    method:'get',
    params:list,
})
.then(res=>{
    console.log(res);
    list.value = res.data;
})
.catch(err=>{
    console.log(err);
    
})
}

const Photo = (e:any)=>{
console.log(e);
data.hotelImg = '';
let obj = e.target.files[0];
let f = new FormData();
f.append('file',obj);
axios({
    url:'/api/Upload/Upload',
    method:'post',
    data:f
})
.then(res=>{
    console.log(res);
    if(res.data == '不是图片'){
        alert('上传的不是图片');
        return;
    }
    if(res.data == '大于2M'){
        alert('上传的图片大于2M');
        return;
    }
    data.hotelImg = res.data;
})
.catch(err=>{
    console.log(err);
    
})
}

const ok = ()=>{
if(data.hotelName==''){
    alert('酒店名称不能为空');
    return;
}
if(data.phone==''){
    alert("联系方式不能为空");
    return;
}
if(data.addressDic==''){
    alert("详细地址不能为空");
    return;
}
if(data.createTime==''){
    alert("开业时间不能为空");
    return;
}
if(data.hotelDesc==''){
    alert("酒店介绍不能为空");
    return;
}
if(data.transport==''){
    alert("交通指引不能为空");
    return;
}
if(data.policy==''){
    alert("酒店政策不能为空");
    return;
}
axios({
    url:'/api/Hotel/AddHotel',
    method:"post",
    data:data,
})
.then(res=>{
    console.log(res);
    if(res.data == -1){
        alert('联系方式重复');
        return;
    }else if(res.data>0){
        alert('添加成功');
        router.push('/HotelList');
    }else{
        alert('添加失败');
        return;
    }
})
.catch(err=>{
    console.log(err);
    
})
}


</script>

<style scoped>

</style>